<template>
	<view class="poster">
		<navSearchBar title="分享海报" ></navSearchBar>
	<!-- 	<uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
							:show="show"><text class="animation-dom">示例元素</text></uni-transition> -->
		<view  class="animation-dom" v-if="!posterUrl">
			 <text class="animation-dom-1" >正</text>
			 <text class="animation-dom-2" >在</text>
			 <text class="animation-dom-3">加</text>
			 <text class="animation-dom-4" >载</text>
		</view>
		<view class="content">
			
			<image :src="posterUrl" class="image" show-menu-by-longpress mode=""></image>
			<!--  -->
		</view>
		
		<view class="footer">
			<text :style="{color:color}">{{topText}}</text>
			<text>{{text}}</text>
		</view>
		
	</view>
</template>

<script>
	
	export default {
		components:{
		
		},
		data() {
			return {
				topText:'海报正在生成中',
				text:'请不要关闭此页面',
				posterUrl:'',
				show: true,
				modeClass: 'fade',
				styles: {},
				
				color:'',
				
			}
		},
		onLoad(){
			// #ifdef APP-NVUE
			this.styles = {
				justifyContent: 'center',
				alignItems: 'center',
				width: '100px',
				height: '100px',
				borderRadius: '5px',
				textAlign: 'center',
				backgroundColor: '#4cd964',
				boxShadow: '0 0 5px 1px rgba(0,0,0,0.2)'
			}
			// #endif
			this.id = this.$Route.query.product_id
			this.getPoster();
			
			
		},
		methods: {
			getPoster(){
				this.$http.post('/api/member/business/placard/product/handle',{product_id:this.id}).then((res) => {
					if(res.data.status == 200) {
						this.posterUrl = res.data.data;
						console.log('mmmmm',this.posterUrl)
						this.topText = '海报生成成功';
						this.text = '长按图片可保存或转发';
						this.color = 'green'
					}
				})
			},
			initAnimation(){
								// TODO 下面修改宽高在百度下还有些问题待修复
								// this.$refs.ani.step({
								// 	width: '200px'
								// })
								// this.$refs.ani.step({
								// 	height: '150px'
								// },{
								// 	delay:100,
								// 	duration:200
								// })
								this.$refs.ani.step({
									width: '100px',
									height: '100px',
									rotate: '180'
								}, {
									delay: 200,
									duration: 300
								})
								this.$refs.ani.step({
									width: '100px',
									height: '100px',
									rotate: '0'
								}, {
									transformOrigin: '50% 50%'
								})
				
								this.$refs.ani.step({
									translateX: '-100px'
								}, {
									timingFunction: 'ease-in',
									duration: 100
								})
				
								this.$refs.ani.step({
									translateX: '100px'
								}, {
									timingFunction: 'ease',
									duration: 300
								})
				
								this.$refs.ani.step({
									translateX: '50px',
									scale: 1.5
								}, {
									timingFunction: 'linear',
									duration: 100
								})
								this.$refs.ani.step({
									translateX: '0px',
									scale: 1
								}, {
									timingFunction: 'linear',
									duration: 150
								})
				
								this.$refs.ani.run();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.animation-dom-1{
		 animation: animation-one 2s infinite;
		 animation-delay:0s;
		
	}
	.animation-dom-2{
		 animation: animation-one 2s infinite;
		 animation-delay:0.5s;
	}
	.animation-dom-3{
		 animation: animation-one 2s infinite;
		 animation-delay:1s;
	}
	.animation-dom-4{
		 animation: animation-one 2s infinite;
		animation-delay:1.5s;
	}
	@keyframes animation-one {
	    0% {
	        transform: scale(1);
	    }
	    50% {
	        transform: scale(2);
	    }
	    100% {
	        transform:  scale(1);
	    }
	}
	
	.poster{
		background-color: #F1F2F4;
		padding-bottom:calc(112rpx + env(safe-area-inset-bottom));
		width: 100vw;
		height: 100vh;
	}
	.animation-dom{
		position: absolute;
		left: 50%;
		top:50%;
		transform: translate(-50%,-50%);
		display: flex;
		color:#F48C2B;
		text{
			display: block;
		}
		text+text{
			margin-left: 30rpx;
		}
	}
	.content{
		margin:40rpx;
		height: 1178rpx;
		background-color: #FFFFFF;
		.image{
			height: 100%;
			width: 100%;
		}
		/* #ifndef APP-NVUE */
			.example ::v-deep .transition {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100px;
				height: 100px;
				border-radius: 5px;
				text-align: center;
				background-color: #4cd964;
				box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2);
			}
		
			/* #endif */
	}
	.footer{
		position: fixed;
		left: 0;
		bottom: 0;
		padding-bottom: env(safe-area-inset-bottom);
		width: 100%;
		height: calc(112rpx + env(safe-area-inset-bottom));
		background: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		text{
			color:#656668;
			&:first-child{
				color: #F48C2B;
				font-size: 50rpx;
				font-weight: $Semibold;
			}
		}
	}
</style>
